<style lang="less">
@import "attachmentManage.less";
</style>
<template>
    <div class="search">
        <div v-show="prodQuery">
            <Card>
                <Row class="operation">
                    <Button @click="addLarge" icon="md-add" type="primary">添加大类</Button>
                    <Button @click="addGroup" icon="md-add" type="primary" v-if="(attachmentForm.attachmentClass === 1)">添加组</Button>
                    <Button @click="addSubclass" icon="md-add" type="primary" v-if="(attachmentForm.attachmentClass === 1 || attachmentForm.attachmentClass === 2)">添加小类</Button>
                </Row>
                <Row class="code-row-bg" justify="start" type="flex">
                    <Col span="6">
                        <Alert show-icon>
                            当前选择编辑：
                            <span class="select-title">{{editTitle}}</span>
                            <a class="select-clear" v-if="editTitle" @click="">取消选择</a>
                        </Alert>
                        <Input
                            @on-change="search"
                            clearable
                            placeholder="输入附件名搜索"
                            suffix="ios-search"
                            v-model="searchKey"
                        />
                        <div class="tree-bar">
                            <Tree
                                :render="renderContent"
                                :data="data"
                                ref="tree"
                                @on-select-change="selectTree"
                            ></Tree>
                        </div>
                        <Spin fix size="large" v-if="loading"></Spin>
                    </Col>
                    <Col span="17" style="margin-left: 10px">
                        <Row>
                            <Table :loading="loading" border :columns="columns" :data="tableData"
                                   @on-sort-change="changeSort" ref="attachmentInfoTable">
                                <template slot="ifDisable" slot-scope="{ row }">
                                    <Button v-if="row.isEnableRule===undefined||row.isEnableRule==='0'||row.isEnableRule===''" style="margin-right:5px" type="success" size="small"
                                            @click="enable(row)">启用
                                    </Button>
                                    <Button v-if="row.isEnableRule==='1'" style="margin-right:5px" type="error" size="small"
                                            @click="enable(row)">停用
                                    </Button>
                                </template>
                                <template slot-scope="{ row, index }" slot="isEnableRule">
                                    <div style="width: 100px" v-if="row.isEnableRule === '0'||row.isEnableRule===undefined||row.isEnableRule===''">
                                        <Tag color="default" size="default">停用</Tag>
                                    </div>
                                    <div style="width: 100px" v-else>
                                        <Tag color="green" size="default">启用</Tag>
                                    </div>
                                </template>
                                <template slot-scope="{row , index}" slot="attachmentClass">
                                    <span>{{setTitle(row.attachmentClass,"attachmentClass")}}</span>
                                </template>
                                <template slot-scope="{row , index}" slot="busiNode">
                                    <span>{{setTitle(row.busiNode,"busiNode")}}</span>
                                </template>
                                <template slot-scope="{row , index}" slot="isArchive">
                                    <span>{{setTitle(row.isArchive,"whetherStatus")}}</span>
                                </template>
                                <template slot-scope="{row , index}" slot="uniqueCode">
                                    <div v-if="row.attachmentClass==3">
                                        <span>{{setTitle(row.uniqueCode,"attachmentUniqueCode")}}</span>
                                    </div>
                                    <div v-else-if="row.attachmentClass==2">
                                        <span>{{setTitle(row.uniqueCode,"imageGroupUnicode")}}</span>
                                    </div>
                                </template>
                                <template slot-scope="{row , index}" slot="needType">
                                    <span>{{setTitle(row.needType,"needType")}}</span>
                                </template>
                                <template slot-scope="{row , index}" slot="synchronizationState">
                                    <span>{{setTitle(row.synchronizationState,"synchronizationState")}}</span>
                                </template>
                                <template slot="action" slot-scope="{ row }">
                                    <div>
                                        <Button v-if="row.needType==='0'" @click="show(row)" size="small" type="error">规则配置</Button>
                                        <Button @click="dataUpdate(row)" size="small" type="primary">数据同步</Button>
                                        <Button @click="editor(row)" size="small" type="primary">编辑</Button>
                                    </div>
                                </template>
                            </Table>
                        </Row>
                        <Row type="flex" justify="end" class="page">
                            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                                  @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                                  size="small" show-total show-elevator show-sizer></Page>
                        </Row>
                    </Col>
                </Row>
            </Card>
            <div class="adjust">
                <Modal :title="attachmentTitle" v-model="attachmentModalVisible" :mask-closable='false' :width="1000" :styles="{top: '90px'}">
                    <Form ref="attachmentEdit" :model="attachmentEdit" :label-width="100" :rules="checkValidate" v-if="attachmentModalVisible">
                        <Row>
                            <Col :span="8">
                                <FormItem label="名称" prop="attachmentName">
                                    <Input v-model="attachmentEdit.attachmentName" style="width: 200px"/>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="是否归档" prop="isArchive">
                                    <Select v-model="attachmentEdit.isArchive" placeholder="请选择是否归档" class="w200" style="width: 200px">
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in dataDic.whetherStatus"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="层级" prop="attachmentClass">
                                    <Select v-model="attachmentEdit.attachmentClass" v-bind:disabled="true" placeholder="请选择层级" class="w200" style="width: 200px">
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in dataDic.attachmentClass"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="是否启用" prop="isEnableRule">
                                    <Select v-model="attachmentEdit.isEnableRule" placeholder="请选择是否启用" class="w200" style="width: 200px">
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in dataDic.isEnableRule"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="生效日期起" prop="effectiveDateStart">
                                    <DatePicker v-model="attachmentEdit.effectiveDateStart" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="生效日期止" prop="effectiveDateEnd">
                                    <DatePicker  v-model="attachmentEdit.effectiveDateEnd" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="必传类型" prop="needType">
                                    <Select v-model="attachmentEdit.needType" placeholder="请选择必传类型" class="w200" style="width: 200px">
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in dataDic.needType"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="最大文件数" prop="maxFileNums">
                                    <InputNumber v-model="attachmentEdit.maxFileNums" :min="0" style="width: 200px"/>
                                </FormItem>
                            </Col>
                            <Col :span="8" style="margin-top: 0px">
                                <FormItem label="最小文件数" prop="minFileNums">
                                    <InputNumber v-model="attachmentEdit.minFileNums" :min="0"　style="width: 200px"/>
                                </FormItem>
                            </Col>
                            <Col :span="8" style="margin-left: 0px">
                                <FormItem label="业务节点" prop="busiNode" style="margin-right: 50px">
                                    <Select v-model="attachmentEdit.busiNode" placeholder="请选择业务节点" class="w200" style="width: 200px" clearable filterable>
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in dataDic.busiNode"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="归档类型" prop="archiveClass" :required="false">
                                    <Select v-model="attachmentEdit.archiveClass" placeholder="请选择归档类型" class="w200" style="width: 200px" clearable filterable>
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in dataDic.eleArchiveClass"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="8">
                                <FormItem label="唯一标识" prop="uniqueCode">
                                    <Select v-model="attachmentEdit.uniqueCode" placeholder="请选择唯一标识" class="w200" style="width: 200px" clearable filterable>
                                        <Option
                                            :value="item.value"
                                            v-for="(item,index) in uniqueCode"
                                            :key="index"
                                        >{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :span="12" style="margin-left: 1px;margin-top: 0px">
                                <FormItem label="排序值" prop="sortOrder" style="margin-right: 50px">
                                    <InputNumber v-model="attachmentEdit.sortOrder" :precision="4" :min="0" style="width: 100px"/>
                                    <span>值越小越靠前，支持小数</span>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div slot="footer">
                        <Button type="text" @click="cancelAttachment">取消</Button>
                        <Button type="primary" @click="submitAttachment('attachmentEdit')">提交</Button>
                    </div>
                </Modal>
            </div>
        </div>
        <attachmentRule v-show="prodAdd" @back="show" :checkid="id">返回</attachmentRule>
    </div>
</template>

<script>
import attachmentRule from "@/projects/basic/pages/image/attachment-manage/attachmentRule.vue";
import utils from "@/libs/util.js";
import attachmentManage from "./defines/attachmentManage";
import {getAttCategoriesList,addAttachment,getSubCategoriesList,getOneAttachment,updateAttachmentManage,searchAttachment,searchByParentId,dataUpdateAttachment} from "@/projects/basic/api/image/image-manage.js";
import getTreeData from "../defines/getTreeData";
import Vue from 'vue';
import {getByTypes} from "../../../api/admin/datadic";
import {deepClone} from "../../../../../libs/utils/ObjectClone";
Vue.prototype.getTreeData=getTreeData;
export default {
    name: "management",
    components: {
        attachmentRule,
    },
    data() {
        return {
            id:"",
            searchKey:"",
            prodQuery: true,
            prodAdd: false,
            attachmentForm: {
                id: "",
                parentId: 0,
                permissions: "",
                type: 0,
                sortOrder: 0,
                level: null,
                status: '0',
                basic:'N',
                url: "",
                icon: "md-open",
                params:"{}",
                attachmentClass:"",
                requestPath:'',
            },
            modalType:null,
            editTitle:"",
            loading: false,
            dataDic:[],
            data: [],
            attachmentId:"",
            tableData:[],
            searchForm:{
                parentId:"",
                pageNumber:1,
                pageSize:10,
            },
            uniqueCode:[],
            total: 0,
            columns: [
                {
                    type: "selection",
                    minWidth: 60,
                    maxWidth:60,
                    align: "center",
                    fixed: "left"
                },
                {
                    title: "启/停用",
                    key: "ifDisable",
                    minWidth: 80,
                    fixed: "left",
                    slot: "ifDisable",
                },
                {
                    title: "状态",
                    key: "isEnableRule",
                    minWidth: 80,
                    slot: "isEnableRule",
                },
                {
                    title: "名称",
                    key: "attachmentName",
                    minWidth: 150,
                },
                {
                    title: "层级",
                    key: "attachmentClass",
                    minWidth: 80,
                    slot: "attachmentClass",
                },
                {
                    title: "业务节点",
                    key: "busiNode",
                    minWidth: 120,
                    slot: "busiNode",
                },
                {
                    title: "内含项目数",
                    key: "itemNum",
                    minWidth: 100,
                },
                {
                    title: "文件最大数",
                    key: "maxFileNums",
                    minWidth: 100,
                },
                {
                    title: "文件最小数",
                    key: "minFileNums",
                    minWidth: 100,
                },
                {
                    title: "生效日期起",
                    key: "effectiveDateStart",
                    minWidth: 120,
                },
                {
                    title: "生效日期止",
                    key: "effectiveDateEnd",
                    minWidth: 120,
                },
                {
                    title: "是否归档",
                    key: "isArchive",
                    minWidth: 120,
                    slot: "isArchive",
                },
                {
                    title: "唯一标识",
                    key: "uniqueCode",
                    minWidth: 120,
                    slot: "uniqueCode",
                },
                {
                    title: "必传类型",
                    key: "needType",
                    minWidth: 120,
                    slot: "needType",
                },
                {
                    title: "排序值",
                    key: "sortOrder",
                    minWidth: 120,
                },
                {
                    title: "同步状态",
                    key: "synchronizationState",
                    minWidth: 120,
                    slot: "synchronizationState",
                },
                {
                    title: "操作",
                    key: "action",
                    minWidth: 220,
                    align: "center",
                    fixed: "right",
                    slot:"action",
                }
            ],
            //附件新增参数
            attachmentTitle:"附件编辑",
            attachmentModalVisible:false,
            attachmentEdit:{
                id:"",
                parentId:"",
                attachmentName:"",
                isArchive:"",
                attachmentClass:"",
                isEnableRule:"",
                effectiveDateStart:"",
                effectiveDateEnd:"",
                needType:"",
                maxFileNums:null,
                minFileNums:null,
                busiNode:"",
                sortOrder:null,
                archiveClass:"",
            },
            checkValidate:{
                attachmentName: [{required: true, message: "名称不能为空", trigger: "change"}],
                isArchive: [{required: true, message: "是否归档不能为空", trigger: "change"}],
                isEnableRule: [{required: true, message: "是否启用规则不能为空", trigger: "change"}],
                effectiveDateStart: [{required: true, type: 'date', message: "生效日期起不能为空", trigger: "change"}],
                needType: [{required: true, message: "必传类型不能为空", trigger: "change"}],
                maxFileNums: [{required: true, type: 'number', message: "最大文件数不能为空", trigger: "blur"}],
                minFileNums: [{required: true, type: 'number',  message: "最小文件数不能为空", trigger: "blur"}],
                busiNode: [{required: true, message: "业务节点不能为空", trigger: "blur"}],
                sortOrder: [{required: true,type: 'number', message: "排序值不能为空", trigger: "blur"}],
            },
        }
    },
    methods:{
        init(){
            this.getAllList();
            this.getAttachmentList(1,10);
            this.getDic();
        },
        renderContent (h, { root, node, data }) {
            let a = h('span', [
                h('Icon', {
                    props: {
                        type: 'md-folder'
                    },
                    style: {
                        marginRight: '8px',
                        color: '#40a9ff',
                    },
                }),
                h('span', data.title)
            ])

            let b = h('span', [
                h('Icon', {
                    props: {
                        type: 'md-folder-open'
                    },
                    style: {
                        marginRight: '8px',
                        color: '#40a9ff',
                    }
                }),
                h('span', data.title)
            ])

            let c = h('span', [
                h('Icon', {
                    props: {
                        type: 'ios-paper'
                    },
                    style: {
                        marginRight: '8px',
                        color: '#808080',
                    }
                }),
                h('span', data.title)
            ])
            let rd=null;
            if(data.attachmentClass===3){
                rd=c;
            }else {
                if(data.expand==true){
                    rd=b;
                }else if(data.expand==false) {
                    rd=a;
                }
            }
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%',
                }
            }, [rd, h('span', {
                style: {
                    display: 'inline-block',
                    float: 'right',
                    marginRight: '32px'
                }
            })
            ]);
        },
        getAllList(){
            this.loading = true;
            getAttCategoriesList(this.requestPath).then(res=>{
                this.loading = false;
                if (res.code === "0000") {
                    this.attachmentId = res.data[0].id;
                    this.data = this.getTreeData(res.data);
                }
            })
        },
        //搜索
        search() {
            if (this.searchKey) {
                this.loading = true;
                searchAttachment({title: this.searchKey},this.requestPath).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = this.getTreeData(res.data);
                    }
                });
            } else {
                this.getAllList();
            }
        },
        selectTree(v){
            if (v.length > 0) {
                for (let attr in v[0]) {
                    if (v[0][attr] === null) {
                        v[0][attr] = "";
                    }
                }
                let str = JSON.stringify(v[0]);
                let data = JSON.parse(str);
                getOneAttachment(data.id,this.requestPath).then(res=>{
                    let self = this;
                    if(res.code === "0000"){
                        self.attachmentForm.attachmentClass = res.data.attachmentClass;
                        self.attachmentForm.id = res.data.id;
                    }
                });
                this.editTitle = data.title;
                this.searchForm.parentId = data.id;
                this.getByIdAttachment();
            }else{
                this.cancelEdit();
            }
        },
        cancelEdit() {
            let data = this.$refs.tree.getSelectedNodes()[0];
            if (data) {
                data.selected = false;
            }
            // 取消选择后获取全部数据
            this.selectNode = {};
            this.attachmentForm.attachmentClass = "";
            this.editTitle = "";
            this.searchForm.parentId = "";
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.getList();
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getAttachmentList(this.searchForm.pageNumber,this.searchForm.pageSize);
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getAttachmentList(this.searchForm.pageNumber,this.searchForm.pageSize);
        },
        changeSort(e) {
        },
        getAttachmentList(pageNumber, pageSize){
            this.searchForm.pageNumber = pageNumber;
            this.searchForm.pageSize = pageSize;
            getSubCategoriesList(this.searchForm,this.requestPath).then(res=>{
                if (res.code === "0000") {
                    this.tableData = res.data.records;
                    this.total=res.data.total;
                }
            })
        },
        getList(){
            getSubCategoriesList(this.searchForm,this.requestPath).then(res=>{
                if (res.code === "0000") {
                    this.tableData = res.data.records;
                    this.total=res.data.total;
                }
            })
        },
        getByIdAttachment(){
            searchByParentId(this.searchForm,this.requestPath).then(res=>{
                if (res.code === "0000") {
                    this.tableData = res.data.records;
                    this.total=res.data.total;
                }
            })
        },
        getDic(){
            let arr = ["busiNode","needType","isEnableRule","attachmentClass","attachmentUniqueCode","eleArchiveClass","imageGroupUnicode","whetherStatus","synchronizationState"];
            getByTypes(arr).then(res => {
                if (res.code === "0000") {
                    this.dataDic = deepClone(res.data);
                }
            });
        },
        setTitle(key,dicType){
            let title="";
            if(key!==null&&key!==""&&key!==undefined){
                this.dataDic[dicType].forEach(v=>{
                    if(v.value==key){
                        title=v.title;
                    }
                });
            }
            return title;
        },
        //新增大类
        addLarge(){
            this.modalType = 0;
            this.attachmentEdit.attachmentClass = "1";
            this.attachmentEdit.parentId = this.attachmentId;
            this.attachmentEdit.id = "";
            let checkValidate = deepClone(this.checkValidate);
            checkValidate.isArchive[0].required=false;
            checkValidate.isEnableRule[0].required=false;
            checkValidate.needType[0].required=false;
            checkValidate.maxFileNums[0].required=false;
            checkValidate.minFileNums[0].required=false;
            this.checkValidate = checkValidate;
            this.attachmentModalVisible = true;
            this.$refs.attachmentEdit.resetFields();

        },
        //新增组
        addGroup(){
            this.modalType = 0;
            this.attachmentEdit.attachmentClass = "2";
            this.attachmentEdit.parentId = this.attachmentForm.id;
            this.attachmentEdit.id = "";
            this.uniqueCode=this.dataDic.imageGroupUnicode;
            this.attachmentModalVisible = true;
            this.$refs.attachmentEdit.resetFields();
        },
        //新增小类
        addSubclass(){
            this.modalType = 0;
            this.attachmentEdit.attachmentClass = "3";
            this.attachmentEdit.parentId = this.attachmentForm.id;
            this.attachmentEdit.id = "";
            this.uniqueCode=this.dataDic.attachmentUniqueCode;
            this.attachmentModalVisible = true;
            this.$refs.attachmentEdit.resetFields();
        },
        enable(v){
            updateAttachmentManage(v,this.requestPath).then(res=>{
                if(res.code === "0000"){
                    this.$Message.success("操作成功");
                    this.getList();
                }
            })
        },
        //编辑
        editor(row){
            this.modalType = 1;
            // 转换null为""
            for (let attr in row) {
                if (row[attr] === null) {
                    row[attr] = "";
                }
            }
            let str = JSON.stringify(row);
            let member = JSON.parse(str);
            this.attachmentEdit = member;
            this.attachmentEdit.attachmentClass = row.attachmentClass;
            this.attachmentEdit.sortOrder = row.sortOrder;
            this.attachmentEdit.maxFileNums = row.maxFileNums;
            this.attachmentEdit.minFileNums = row.minFileNums;
            if(this.attachmentEdit.attachmentClass=="2"){
                this.uniqueCode=this.dataDic.imageGroupUnicode;
            }else if(this.attachmentEdit.attachmentClass=="3"){
                this.uniqueCode=this.dataDic.attachmentUniqueCode;
            }else{
                this.uniqueCode=[];
            }
            if(row.attachmentClass === 1){
                let checkValidate = deepClone(this.checkValidate);
                checkValidate.isArchive[0].required=false;
                checkValidate.isEnableRule[0].required=false;
                checkValidate.needType[0].required=false;
                checkValidate.maxFileNums[0].required=false;
                checkValidate.minFileNums[0].required=false;
                this.checkValidate = checkValidate;
            }else{
                let checkValidate = deepClone(this.checkValidate);
                checkValidate.isArchive[0].required=true;
                checkValidate.isEnableRule[0].required=true;
                checkValidate.needType[0].required=true;
                checkValidate.maxFileNums[0].required=true;
                checkValidate.minFileNums[0].required=true;
                this.checkValidate = checkValidate;
            }
            this.attachmentModalVisible = true;
            this.$refs.attachmentEdit.resetFields();
        },
        //规则配置
        show(index){
            if(index!=undefined){
                let str = JSON.stringify(index);
                let groupInfo = JSON.parse(str);
                this.id = groupInfo;
            }
            this.prodQuery = !this.prodQuery;
            this.prodAdd = !this.prodAdd;
        },
        //取消
        cancelAttachment(){
            this.attachmentEdit={};
            this.attachmentModalVisible = false;
            this.$refs.attachmentEdit.resetFields();
        },
        //提交
        submitAttachment(name){
            this.$refs[name].validate((valid) => {
                if(valid){
                    if(this.modalType === 0){
                        addAttachment(this.attachmentEdit,this.requestPath).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.attachmentModalVisible = false;
                                this.attachmentEdit={};
                                this.attachmentForm.attachmentClass = "";
                                this.editTitle = "";
                                this.searchKey = "";
                                this.getAllList();
                                this.getList();
                            }
                        })
                    }else{
                        addAttachment(this.attachmentEdit,this.requestPath).then(res=>{
                            if(res.code === "0000"){
                                this.$Message.success("操作成功");
                                this.attachmentModalVisible = false;
                                this.attachmentEdit={};
                                this.attachmentForm.attachmentClass = "";
                                this.editTitle = "";
                                this.searchKey = "";
                                this.getAllList();
                                this.getList();
                            }
                        })
                    }
                }
            });
        },
        //数据同步
        dataUpdate(row){
            dataUpdateAttachment(row,this.requestPath).then(res=>{
                if(res.code === "0000"){
                    this.$Message.success("操作成功");
                    this.getList();
                }
            })
        },
    },
    /*watch:{
        'attachmentEdit.attachmentClass':function (val){
            if(val==="2"){
                this.uniqueCode=this.dataDic.imageUniqueCode
            }
            if (val==="3"){
                this.uniqueCode=this.dataDic.attachmentUniqueCode
            }
        }
    },*/
    activated() {
        if(this.$route.meta.params&&this.$route.meta.params.requestPath&&this.$route.meta.params.requestPath!==''){
            this.requestPath = this.$route.meta.params.requestPath;
        }
        this.init();
    }
}
</script>

<style scoped>
.labelRequired {
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ed4014;
    font-weight: normal;
}
</style>
